<template>
  <el-form class="login-form-content" status-icon :rules="loginRules" ref="loginForm" :model="loginForm" label-width="0">
    <el-form-item prop="username">
      <el-input @keyup.enter.native="handleLogin" v-model="loginForm.username" auto-complete="off" placeholder="请输入用户名" prefix-icon="el-icon-user">
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input @keyup.enter.native="handleLogin" :type="passwordType" v-model="loginForm.password" auto-complete="off" placeholder="请输入密码"
        prefix-icon="iconfont icon-password">
        <i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword">
        </i>
      </el-input>
    </el-form-item>
    <el-form-item>
      <el-button :loading="loading" type="primary" @click.native.prevent="handleLogin" class="login-submit">
        登录
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'userlogin',
  data() {
    return {
      loading: false,
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码长度最少为6位', trigger: 'blur' }
        ]
      },
      passwordType: 'password'
    }
  },
  created() { },
  mounted() { },
  computed: {},
  props: [],
  methods: {
    showPassword() {
      this.passwordType === ''
        ? (this.passwordType = 'password')
        : (this.passwordType = '')
    },
    handleLogin() {
      this.loading = true
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          let params = {
            loginNameOrEmail: this.loginForm.username.trim(),
            password: this.loginForm.password
          }
          this.$store.dispatch('auth/userLogin', params).then(() => {
            this.$router.push('/myFile')
          })
        } else {
          this.loading = false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  ::v-deep.login-form-content {
    .el-form-item__content {
      width: 270px;
    }
    .login-submit {
      width: 100%;
      font-size: 20px;
      margin-top: 30px;
    }
    .el-input__icon {
      color: #333;
    }
  }
</style>
